import React from 'react'
import '../../../css/csy/Header.css'

import { NavBar, Toast } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'



function Header({ List }: any) {

    const navigate = useNavigate()
    const back = () => {
        sessionStorage.setItem('integralShop', JSON.stringify({ flag: true }))
        navigate(-1)
    }

    const checkMeditType = (urlData: any): string | null => {
        if (urlData === undefined) return null
        const suffix = urlData.split('.').pop().toLowerCase();
        const image = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'];
        const video = ['mp4', 'avi', 'mov', 'rmvb', 'flv', 'mkv'];

        if (image.includes(suffix)) {
            return "image";
        } else if (video.includes(suffix)) {
            return "video";
        } else {
            return null;
        }
    };
    return (
        <>
            <div className="header">
                <NavBar back={
                    <div className='back'>
                        {
                            checkMeditType(List.path) == 'image' ?
                                <img src={List.path} className='backImg' /> :
                                <video style={{ width: '4rem', height: '4rem', objectFit: 'cover', borderRadius: '5rem' }} className='backImg' src={List.path}></video>
                        }
                        <span>{List.user}</span>
                    </div>
                } onBack={back} >
                </NavBar>
            </div>
        </>
    )
}

export default Header